在用浏览器打开网页时,浏览器会从服务器上下载这个网页和网页上的多媒体内容。如果网页上的图片文件很大,这时因为网络速度的原因,网页的打开速度就会很慢,因此需要用软件把网页上的图片进行优化。网页上的图片,一般要求有很好的视觉效果,但是对于一般的图片,在颜色单一的情况下,可以对图片的格式进行优化和压缩。网页上的图片一般是GIF格式或JPG格式。在网页设计时,需要根据图片的类型和实际需要合理地选择这两种图片格式。
GIF是网络上使用最早、应用最为广泛的图像格式。GIF的主要原理是减少图像中每点颜色的存储位数来实现对图像文件的压缩,也可以理解为,GIF减少了图片色板中颜色的数量,从而在存储时减小了文件的大小。GIF减少了图像的颜色,在图像显示时可能不能完全还原以前的色彩,但是由于其极大地压缩了图片,有利于网络传输,所以在网络上有着广泛的应用。
GI支持透明背景和动画效果,这就可以更加丰富网页的媒体效果JPG是一种在网络上被广泛支持的图片格式。JPG可以支持24位真彩色,可以很好地还原图片的色彩。图像处理软件可以把JG图片进行不同程度的压缩和存储。
1、Fireworks与 Dreamweaver的关联操作
Fireworks和 Dreamweaver都是专业的网页设计软件。在网页设计时,两种软件常常是关联操作的互相配合完成不同的功能。
Fireworks是图片设计软件,集成了很多切片链接、热点链接等功能,可以方便地在图片中插入链接并方便地导出为网页。
Dreamweaver是网页设计软件,也集成了许多图片处理的工具和操作,可以方便地对网页中的图片进行优化和处理。
在网页设计时,需要灵活地使用 Fireworks和 Dreamweaver的强大功能。在图片设计时充分优化和排版网页,在网页设计时对图片进行有效的处理与设置。
2、优化页面图像
在用 Dreamweaver进行网页设计时,可以利用 Dreamweaver的图像处理功能,灵活地对图像进行处理与优化。 Dreamweaver可以实现图片的裁剪、优化、图片效果设置等功能
关联至图像软件
在操作 Dreamweaver中的图片时,有时需要对网页中的图片进行编辑,Dreamweaver在图片属性中提供了关联到外部图像软件的功能。 Dreamweaver可以设置一个图像编辑软件,在设计视图中,选择一张图片以后,可以单击“属性”面板中的“图像编辑”工具,启动图像编辑软件对图像进行编辑
(1)在 Dreamweaver中选择“编辑首选参数”命令,弹出“首选参数”对话框,在“分类列表中选择“文件类型/编辑器”选项。
(2)单击 Fireworks文本框后面的“浏览”按钮,在“选择外部编辑器”对话框中选择 Fireworks
CS6所在的路径。 Fireworks CS6一般安装在C: Program files\Adobe\ Adobe Fireworks CS6目录下面,单击“确定”按钮,完成设
(3)也可对不同格式的文件设置不同的外部编辑器。单击“扩展名”列表中的一种扩展名,然后在“编辑器”列表中添加一个外部编辑器。
(4)单击“确定”按钮,完成编辑器的设置。
3、图片的优化处理
在 Dreamweaver中设置了 Fireworks的路径以后,即可在 Dreamweaver中对图片进行优化和处理。这些操作可以使用 Fireworks cs6完成,但是在 Dreamweaver CS6中的操作会更方便，具体操作步骤如下：
(1)在计算机中的“E:”盘下新建一个文件夹eg11
(2)打开本书光盘,将“源文件\1图片”中的3个图片文件复制到步骤(1)新建的文件夹中
(3)打开 Dreamweaver CS6,选择“文件”|“新建”命令,新建一个HTML网页文件。
(4)选择“文件”|“保存”命令,将文件保存至“E:egll”文件下,文件名为egl.html
(5)选择“插入图像”命令,在打开的“选择图像源文件”对话框中,选择插入从光盘中复制的图片alt.jpg
(6)选择“文件保存”命令,保存文件。按F12键运行预览网页,网页中图片的效果如
(7)对图片的优化和设置可能会更改该图片文件,为了便于对比操作,需要复制所插入的图片文件。打开文件夹“E:eg1l”,将文件a1jpg复制为al_1jpg、al2jpg、a_3jpg、al4jpg、al5jpg。
(8)网页中常用的图片格式是JPG格式或GIF格式。在“格式”下拉列表框中选择JPEG选项,然后在“品质”文本框中输入“29”,“品质”文本框是对图片质量的设置。
4、图片大小的调整
在网页中插入过大的图片时,可以设置图片的宽度和高度使图片正常显示。这样虽然可以使图片正常显示,但是过大的图片文件会影响网页打开的速度,需要重新设置图片的大小。 Photoshop Cs6和Fireworks CS6可以用设置图像大小的方法调整图片的占用空间。 Dreamweaver CS6提供了图像大小的设置工具,对图片的大小设置非常方便,操作步骤如下
(1)打开 Dreamweaver CS6,选择“文件”|“新建”命令,新建一个HTML网页文件。
(2)选择“文件保存”命令,将文件保存至“E:leg11”文件下,文件名为eg2html
(3)选择“插入图像”命令,在弹出的“选择图像源文件”对话框中,选择插入从光盘中复制的图片a2jpg。单击“确定”按钮,完成图片插入。
(4)单击“确定”按钮完成设置。选择“文件”|“保存”命令保存文件。
(5)按F12键运行网页,网页图片的效果如图11-9所示。可以发现图片很大,需要对图片的大小进行设置。
(6)在 Dreamweaver Cs6的设计视图中选择插入的图片,单击“属性”面板上的“优化”按钮对图片进行优化。
(7)在图片的优化对话框中选择“文件”选项卡,在“宽”文本框中输入“400”,将图片宽度和高度设置成图片压缩以后的大小。在“文件”选项卡中,已经默认选中“约束比例”复选框,图片的高度会自动设置并保持与原图相同的比例。
(8)单击“确定”按钮,完成图片大小的设置。选择“文件”|“保存”命令,保存文件
(9)按F12键运行网页,网页图片的效果如图11-11所示。发现图片已经变小,可以在浏览器的窗口中完全显示。
5、图片的亮度与对比度的设置
Dreamweaver可以方便地对图片的亮度与对比度进行设置。这些设置与 Fireworks CS6中的图片设置和 Photoshop cs6中图片设置的效果是相同的打开 Dreamweaver CS6,选择“文件新建”命令,新建一个HTML网页文件。
(1)选择“文件保存”命令,将文件保存至“E:eg11”文件下,文件名为eg3html
(2)选择“插入”“图像”命令,在弹出的“选择图像源文件”对话框中选择插入图片al_3:jpg，单击“确定”按钮,完成图片插入。
(3)选择“文件保存”命令,保存文件。
(4)按F12键运行网页,网页中图片的原始效果。
(5)在 Dreamweaver CS6的设计视图中选择插入的图片,单击“属性”面板上的“亮度和对比度”按钮,,对图片进行亮度与对比度的设置
(6)为图片的“亮度/对比度”对话框,拖动“亮度”的滑块,“亮度”文本框中会显示相应的数值。
(7)单击“确定”按钮,完成图片亮度的设置。选择“文件保存”命令,保存文件。
(8)按F12键运行网页,网页图片的效果如图11-14所示。可以发现网页中图片的亮度已经改变。
(9)在 Dreamweaver CS6设计视图的图片后单击,再选择“插入图像”命令,在弹出的“选择图像源文件”对话框中选择插入图片a14jpg。单击“确定”按钮,完成图片的插入
(10)在 Dreamweaver cs6的设计视图中选择插入的图片,单击“属性”面板上的“亮度和对比度”按钮,对图片进行亮度与对比度的设置
(11)图片的“亮度对比度”对话框,拖动“对比度”的滑块,“对比度”文本框中会显示相应的数值。
(12)单击“确定”按钮,完成图片亮度的设置。选择“文件”丨“保存”命令,保存文件。
(13)按F12键运行网页,网页图片的效果如图11-16所示。可以发现网页中图片的对比度已经改变。
5、图片的锐化设置
图片的锐化就是使图片不同颜色的边界清晰,使图片更具有层次感。 Dreamweaver的图片锐化工具可以方便地对网页的图片进行锐化设置
(1)打开 Dreamweaver CS6,选择“文件”|“新建”命令,新建一个HTML网页文件。
(2)选择“文件保存”命令,将文件保存至“E:egl1”文件下,文件名为eg4htm。
(3)选择“插入”“图像”命令,在弹出的“选择图像源文件”对话框中选择插入图片a1_5jpg然后单击“确定”按钮,完成图片插入
(4)选择“文件保存”命令,保存文件。
(5)按F12键运行网页,网页图片的原始效果。
(6)在 Dreamweaver Cs6的设计视图中选择插入的图片,单击“属性”面板上的“锐化”按钮△,对图片进行锐化设置
(7)如图11-18所示为图片的“锐化”对话框,拖动“锐化”的滑块,“锐化”文本框中会显示相应的数值。
(8)单击“确定”按钮,完成图片亮度的设置。选择“文件”丨“保存”命令,保存文件。
(9)按F12键运行网页,网页图片的效果如图11-19所示。可以发现网页中图片的亮度已经改变。
6、图片的裁剪
用Dreamweaver进行网页排版时,如果需要对图片进行裁剪,可以不用外部工具进行图片裁剪。选择Dreamweaver CS6的图片裁剪工具,可以对图片进行方便的裁剪。
(1)打开 Dreamweaver CS6,选择“文件新建”命令,新建一个HTML网页文件。
(2)选择“文件保存”命令,将文件保存至“E:leg11”文件下,文件名为eg5html。
(3)选择“插入图像”命令,在弹出的“选择图像源文件”对话框中选择插入图片al6jp单击“确定”按钮,完成图片的插入。
(4)选择“文件保存”命令,保存文件
(5)按F12键运行网页,裁剪之前的图片。
(6)在 Dreamweaver CS6的设计视图中选择插入的图片,单击“属性”面板上的“裁剪”按钮型对图片进行裁剪。此时,设计视图中的图片会个边框和拖动点,如图所示。调整这个边框的大小可以设置裁剪的区域,双击图片,完成图片的裁剪。
(7)图片裁剪以后,设计视图如图。
